<template>
	<div>
		<div class="head">
			<a @click="getBack" class="return"></a>
			添加银行卡
		</div>
		<div class="overlay">
			<div class="overlay-content scrolling">
				<div style="padding: 20px 15px;">
					<van-field v-model="bank_name" placeholder="请输入开户银行" label="开户银行" maxlength="20" clearable />
					<van-field v-model="bank_branch" placeholder="请输入开户支行" label="开户支行" maxlength="50" clearable />
					<van-field v-model="card" placeholder="请输入银行卡号" label="银行卡号" maxlength="18" clearable type="tel"/>
					<div style="padding-top: 50px;">
						<van-button size="normal" class="van-button--info" @click="addBank" :loading="loading">保存</van-button>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import { otc } from './../utils/api';
	export default {
		data() {
			return {
				loading: false,
				bank_name: '',
				bank_branch: '',
				card: ''
			}
		},
		created() {

		},
		mounted() {

		},
		watch: {
			bank_name: function(){
			    this.bank_name = this.bank_name.replace(/[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘’，。、]/g, ''); // //限制输入特殊字符
			},
			bank_branch: function(){
			    this.bank_branch = this.bank_branch.replace(/[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘’，。、]/g, ''); // //限制输入特殊字符
			},
			card: function(){
			    this.card = this.card.replace(/[^\a-\z\A-\Z0-9]/g, ''); // 只能输入数字
			}
		},
		methods: {
			getBack() {
				if(this.$route.query.roid) {
					this.$router.push({
						path: '/Pay',
						query: {
							roid: this.$route.query.roid
						}
					})
				} else {
					this.$router.push({
						path: '/Pay'
					})
				}
			},
			addBank() { // 添加银行卡
				if(!this.bank_name) {
					this.$toast('开户银行不能为空');
					return false;
				}
				if(!this.bank_branch) {
					this.$toast('开户支行不能为空');
					return false;
				}
				if(!this.card) {
					this.$toast('银行卡号不能为空');
					return false;
				}
				this.loading = true;
				otc.getUpload({
					"type": 0,
					"card": this.card,
					"bank_name": this.bank_name,
					"bank_branch": this.bank_branch
				}).then(res => {
					if(res.code == 200){
						this.$toast('银行卡信息成功');
						setTimeout(()=>{
							if(this.$route.query.roid) {
								this.$router.push({
									path: '/Pay',
									query: {
										roid: this.$route.query.roid
									}
								})
							} else {
								this.$router.push({
									path: '/Pay'
								})
							}
						},500);
					}else{
						this.$toast(res.msg);
					}
					this.loading = false;
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	/deep/ .van-field__label {
		color: white;
		width: 80px;
	}
	
	/deep/ .van-cell {
		border-bottom: 1px solid #4c536a;
		padding: 10px 0px;
		padding-top: 15px;
	}
	
	/deep/ .van-cell:not(:last-child)::after {
		border: 0;
	}
</style>